<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>mac页面</title>
		<link rel="stylesheet" type="text/css" href="css/cube.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		
		<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
		<script src="js/init.js" type="text/javascript"></script>
		<script src="js/bootstrap.min.js" type="text/javascript"></script>
	</head>
	<body>
<!--	nav-->
	<nav class="navbar navbar-inverse">
  		<div class="container">
  		  <ul class="head">
  			<li><a href="index.html"><span class="iconfont">&#xe602;</span></a></li>
  			<li><a href="#" style="opacity:0.65;">Mac</a></li>
  			<li><a href="iPad.html">iPad</a></li>
  			<li><a href="iPhone.html">iPhone</a></li>
  			<li><a href="watch.html">Watch</a></li>
  			<li><a href="music.html">Music</a></li>
  			<li><a href="#">技术支持</a></li>
  			<li><a href="#"><span class="iconfont">&#xe601;</span></a></li>
  			<li id="gou"><a href="#"><span class="iconfont">&#xe60c;</span></a></li>
  		  </ul>
  		</div>
	</nav>
	
<!--head-->
	<header>
		<div class="shopping">
			<div class="sanjiao"></div>
			<p>你的购物袋是空的</p>
			<ul>
				<li><a href="#"><img src="images/bag.svg"/ style="margin-right:10px;">购物袋</a></li>
				<li><a href="#"><img src="images/favorites.svg"/ style="margin-right:10px;">收藏</a></li>
				<li><a href="#"><img src="images/orders.svg"/ style="margin-right:10px;">订单</a></li>
				<li><a href="#"><img src="images/account.svg"/ style="margin-right:10px;">账户</a></li>
				<li><a href="#"><img src="images/signIn.svg"/ style="margin-right:10px;">登录</a></li>
			</ul>
		</div>
		<div class="container">
		<ul class="picture">
			<li><a href="#"><img src="images/macbook.svg"/><br/>
				<span>MacBook</span></a></li>
			<li><a href="#"><img src="images/macbookair.svg"/><br/>
				<span>MacBook Air</span></a></li>
			<li><a href="#"><img src="images/macbookpro.svg"/><br/>
				<span>MacBook Air</span><br><span style="color:#e85d00;">新款</span></a></li>
			<li><a href="#"><img src="images/imac.svg"/><br/>
				<span>iMac</span></a></li>
			<li><a href="#"><img src="images/macpro.svg"/><br/>
				<span>Mac Pro</span></a></li>
			<li><a href="#"><img src="images/macmini.svg"/><br/>
				<span>Mac mini</span></a></li>
			<li><a href="#"><img src="images/mac.svg"/><br/>
				<span>配件</span></a></li>
			<li><a href="#"><img src="images/mac_osx.svg"/><br/>
				<span>macOS Sierra</span></a></li>
			<li><a href="#"><img src="images/mac_comp.svg"/><br/>
				<span>机型比较</span></a></li>
		</ul>
		</div>
	</header>
<!--主体-->
<!--第一张图-->
<div class="container macbook">
	<p>MacBook Pro</p>
	<h1>一身才华，一触，即发。</h1>
	<h2><a href="#">进一步了解&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;购买&gt;</a></h2>
	<img class="img-responsive" src="images/macbookpro.png"/>
</div>
<!--第二张图-->
	<div class="times">
		<div class="container">
			<p>MacBook</p>
			<h1>轻于时代，先于时代。</h1>
			<h2><a href="#">进一步了解&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;购买&gt;</a></h2>
			<img class="img-responsive" src="images/macbook.png"/>
		</div>
	</div>
<!--第三张图-->
	<div class="times">
		<div class="container">
			<p>iMac</p>
			<h1>Retina 的大作，一款又一款。</h1>
			<h2><a href="#">进一步了解&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;购买&gt;</a></h2>
			<img class="img-responsive" src="images/imac.png"/>
		</div>
	</div>
<!--第四张图-->
	<div class="container compare">
		<h2>Mac 机型比较。</h2>
		<p><a href="#">找到适合你的 Mac</a></p>
		<img class="img-responsive" src="images/compare.png"/>
	</div>
<!--第五张图-->
	<div class="pickup">
		<div class="container">
			<div class="row">
				<div class="col-lg-6">
					<img src="images/pickup.png"/>
					<h3>前往零售店</h3>
					<p>到 Apple Store 零售店亲身体验各种 Apple 产品，<br/>我们还将为你解答相关问题。</p>
					<span><a href="#">进一步了解&nbsp;&gt;</a></span>
				</div>
				<div class="col-lg-6">
					<img src="images/shipping.png"/>
					<h3>免费送货</h3>
					<p>享受免费送货上门服务。</p>
					<span><a href="#">进一步了解&nbsp;&gt;</a></span>
				</div>
			</div>
		</div>
	</div>
<!--第六张图-->
	<div class="compare" style="background:linear-gradient(#fff, #FDFDFD, #F7F7F7);;">
		<h2>Mac 配件</h2>
		<p><a href="#">立即选购&gt;</a></p>
		<img class="img-responsive" src="images/accessories.png" style="border:0;"/>
	</div>
<!--第七张图-->
	<div class="icoud">
		<img class="img-responsive" src="images/macos.png"/>
		<div class="container">
			<div class="row macos">
				<div class="col-lg-6">
					<h2>macOS Sierra</h2>
					<p>macOS，是助你在 Mac 上尽情施展的强大操作系统。而 macOS Sierra 更为 Mac 带来了 Siri这一新成员，
					和多种欣赏照片的新方式，而且还能让不同设备之间的协作更加紧密流畅。</p>
					<p><a href="">进一步了解&nbsp;&gt;</a></p>
				</div>
				<div class="col-lg-6">
					<h2>iCloud</h2>
					<p>有了 iCloud，你在各种设备上都可获得最新版本<br/>
					的文档、app、备忘录和通讯录等重要信息。</p>
					<p><a href="">进一步了解&nbsp;&gt;</a></p>
				</div>
			</div>
		</div>
	</div>
<!--第八张图-->
	<div class="built">
		<h2>内置 App</h2>
		<p>每台 Mac 都内置了众多激发创意、提升效率的 app。这些功能强大的工具能助你来探索、交流、高效工作。访问 <br>
			<a href="">Mac App Store</a>，更有成百上千款 app 等你发现。</p>
		<div class="container store">
			<ul>
				<li class="cai"><img src="images/photos.png"/><br><span>照片</span></li>
				<li><img src="images/imovie.png"/><br><span>iMovie</span></li>
				<li><img src="images/garageband.png"/><br><span>GarageBand</span></li>
				<li><img src="images/pages.png"/><br><span>Pages</span></li>
				<li><img src="images/numbers.png"/><br><span>Numbers</span></li>
				<li><img src="images/keynote.png"/><br><span>Keynote</span></li>
				<li><img src="images/safari.png"/><br><span>Safari</span></li>
			</ul>
		</div>
		<div class="switch">
<!--切换1-->
		  <div class="container" style="display:block;">
			<div class="row">
				<div class="col-lg-6">
					<img src="images/photos_large.jpg"/>
				</div>
				<div class="col-lg-6 zhaopian">
					<img src="images/photos2.png"/>
					<h2>照片</h2>
					<p>能让你日益庞大的照片图库变得井井有条，并易于查看。还能帮助你美化图像，创作精彩照片。更有 iCloud 照片图库，
						让你可以将值得长久珍藏的照片和视频保存在云端。</p>
					<span><a href="#">进一步了解&nbsp;&gt;</a></span>
				</div>
			</div>
		</div>
<!--切换2-->
		<div class="container" style="display:none;">
			<div class="row">
				<div class="col-lg-6">
					<img src="images/bia_imovie.jpg"/>
				</div>
				<div class="col-lg-6 zhaopian">
					<img src="images/bia_imovie2.png"/>
					<h2>iMovie</h2>
					<p>以前所未有的方式讲述精彩故事。精简的设计与直<br>观的剪辑功能，让你轻松制作精美的 4K 影片和<br>颇具好莱坞风格的预告片。
						你还可以通过 iMovie<br>Theater 在各种设备上欣赏这些作品。</p>
					<span><a href="#">进一步了解&nbsp;&gt;</a></span>
				</div>
			</div>
		</div>
		<!--切换3-->
		<div class="container" style="display:none;">
			<div class="row">
				<div class="col-lg-6">
					<img src="images/bia_garageband.jpg"/>
				</div>
				<div class="col-lg-6 zhaopian">
					<img src="images/bia_garageband2.png"/>
					<h2>GarageBand</h2>
					<p>在 Mac 上制作绝妙旋律，简单到离谱。它拥有直<br>观的界面，以及一套完整的声音资源库，让你能够<br>如专业制作人一般学习、演奏、录制和共享乐曲，
						<br>一切就这么简单轻松。</p>
					<span><a href="#">进一步了解&nbsp;&gt;</a></span>
				</div>
			</div>
		</div>
<!--切换4-->
		<div class="container" style="display:none;">
			<div class="row">
				<div class="col-lg-6">
					<img src="images/bia_pages.jpg"/>
				</div>
				<div class="col-lg-6 zhaopian">
					<img src="images/bia_pages.png"/>
					<h2>Pages</h2>
					<p>这款功能强大的文字处理软件，能满足你的各种所<br>需，令制作出的文档看起来漂亮，读起来也漂亮。<br>
						你可在 Mac 和 iOS 设备之间无缝切换，还可与<br>使用 Microsoft Word 的其他人轻松协作。</p>
					<span><a href="#">进一步了解&nbsp;&gt;</a></span>
				</div>
			</div>
		</div>
<!--切换5-->
		<div class="container" style="display:none;">
			<div class="row">
				<div class="col-lg-6">
					<img src="images/bia_numbers.jpg"/>
				</div>
				<div class="col-lg-6 zhaopian">
					<img src="images/bia_numbers2.png"/>
					<h2>Numbers</h2>
					<p>创建精密的电子表格，添加引人注目的交互式图<br>表、表格和图像，让你的数据生动显现。你可在 <br>
						Mac 和 iOS 设备之间无缝切换，还可与使用 <br>Microsoft Excel 的其他人轻松协作。</p>
					<span><a href="#">进一步了解&nbsp;&gt;</a></span>
				</div>
			</div>
		</div>
<!--切换6-->
		<div class="container" style="display:none;">
			<div class="row">
				<div class="col-lg-6">
					<img src="images/bia_keynote.jpg"/>
				</div>
				<div class="col-lg-6 zhaopian">
					<img src="images/bia_keynote2.png"/>
					<h2>Keynote</h2>
					<p>通过赏心悦目的演示文稿，让你的想法得以生动呈<br>现。运用多种强大工具和炫目效果，让你的观众目<br>
					     不转睛。你可在 Mac 和 iOS 设备之间无缝切换，<br>还可与使用 Microsoft PowerPoint 的其他人<br>轻松协作。</p>
					<span><a href="#">进一步了解&nbsp;&gt;</a></span>
				</div>
			</div>
		</div>
<!--切换7-->
		<div class="container" style="display:none;">
			<div class="row">
				<div class="col-lg-6">
					<img src="images/bia_safari.jpg"/>
				</div>
				<div class="col-lg-6 zhaopian">
					<img src="images/bia_safari2.png"/>
					<h2>Safari</h2>
					<p>Safari 的各种创新功能让你尽享网络的更多精<br>彩。节能技术让你上网浏览的时间更长，内置隐私 <br>
						功能比以往更为强大，你可以在各种设备之间无缝 <br>切换浏览，还可以轻松分享你喜爱的页面。</p>
					<span><a href="#">进一步了解&nbsp;&gt;</a></span>
				</div>
			</div>
		</div>		
		
	  </div>
	</div>
<!--第九张图-->
	<div class="built">
		<div class="container">
			<h2>专业 App</h2>
			<p>对于想要尽情发挥创意的专业人士而言，这里有众多为业界所推崇的 app，可以用来更好地掌控音乐与影片的<br>剪辑、处理和输出。</p>
			<ul class="final">
				<li class="cai"><img src="images/finalcut.png"/><br><span>Final Cut Pro X</span></li>
				<li><img src="images/logicpro.png"/><br><span>Logic Pro X</span></li>
				<li><img src="images/motion.png"/><br><span>Motion</span></li>
				<li><img src="images/compressor.png"/><br><span>Compressor</span></li>
				<li><img src="images/mainstage.png"/><br><span>MainStage3</span></li>
			</ul>
		<div class="album">
<!--第一张图-->
			  <div class="row" style="display:block;">
				<div class="col-lg-6 zhaopian">
					<img src="images/finalcut2.png"/>
					<h2>Final Cut Pro X</h2>
					<p>为了满足如今剪辑师们四溢的灵感，<br>Final Cut Pro 提供开创性的视频剪辑<br>功能、强大的媒体组织整理能力和杰出的<br>
					  性能，并针对 Mac 电脑和 <br>macOS Sierra 进行了全面优化。</p>
					<span><a href="#">进一步了解&nbsp;&gt;</a></span>
				</div>
				<div class="col-lg-6">
					<img src="images/pro_finalcut.png"/>
				</div>
			  </div>
<!--第二张图-->
			  <div class="row" style="display:none;">
				<div class="col-lg-6 zhaopian">
					<img src="images/pro_logicpro2.png"/>
					<h2>Logic Pro X</h2>
					<p>Logic Pro 在你的 Mac 上构建起一座<br>完备的录音和 MIDI 工作室，以别开生面<br>的方式满足你作曲、录音、编辑和混音的<br>
					       各种所需。有了 64 位架构，你处理任何<br>规模的项目都能得心应手。</p>
					<span><a href="#">进一步了解&nbsp;&gt;</a></span>
				</div>
				<div class="col-lg-6">
					<img src="images/pro_logicpro.png"/>
				</div>
			  </div>			  
<!--第三张图-->
			  <div class="row" style="display:none;">
				<div class="col-lg-6 zhaopian">
					<img src="images/pro_motion2.png"/>
					<h2>Motion</h2>
					<p>Motion 是一款强大的动态图形工具，可<br>帮助你轻松制作电影风格的 2D 及 3D <br>字幕、流畅的转场和逼真的特效，一切效<br>
					      果即时可见。</p>
					<span><a href="#">进一步了解&nbsp;&gt;</a></span>
				</div>
				<div class="col-lg-6">
					<img src="images/pro_motion.png"/>
				</div>
			  </div>	
<!--第四张图-->
			  <div class="row" style="display:none;">
				<div class="col-lg-6 zhaopian">
					<img src="images/pro_compressor2.png"/>
					<h2>MainStage 3</h2>
					<p>专为现场演出打造的全屏幕界面，灵活的<br>硬件操控，以及众多与 Logic Pro X 完<br>全兼容的插件和音效，将你的 Mac 变身<br>
					      现场演出装备。</p>
					<span><a href="#">进一步了解&nbsp;&gt;</a></span>
				</div>
				<div class="col-lg-6">
					<img src="images/pro_mainstage.png"/>
				</div>
			  </div>
<!--第五张图-->
			  <div class="row" style="display:none;">
				<div class="col-lg-6 zhaopian">
					<img src="images/pro_mainstage2.png"/>
					<h2>Motion</h2>
					<p>Motion 是一款强大的动态图形工具，可<br>帮助你轻松制作电影风格的 2D 及 3D <br>字幕、流畅的转场和逼真的特效，一切效<br>
					      果即时可见。</p>
					<span><a href="#">进一步了解&nbsp;&gt;</a></span>
				</div>
				<div class="col-lg-6">
					<img src="images/pro_motion.png"/>
				</div>
			  </div>			
			  
		  </div>
		</div>
	</div>
<!--第十张图-->
	<div class="education" style="background:url(images/education.jpg);">
		<h2>Mac 教育应用</h2>
		<p>让好奇心和创造力在课堂内外都得到激发。</p>
		<span><a href="#" style="color:#fff;">了解Mac教育应用&nbsp;&gt;</span><span>高校师生选购&nbsp;&gt;</a><span>
	</div>
<!--第十一张图-->
	<div class="education" style="background:url(images/business.jpg);margin-top:0;">
		<h2>Mac 商务应用</h2>
		<p>以强大的装备，让你的商务事业更上一层楼。</p>
		<span><a href="#" style="color:#fff;">了解Mac教育应用&nbsp;&gt;</span><span>高校师生选购&nbsp;&gt;</a><span>
	</div>
<!--第十二张图-->
	<div class="education" style="background:url(images/workshops.jpg); margin:0;">
		<h2>参加店内免费讲座，<br>发掘 Mac 的无限精彩。</h2>
		<p>报名参加 Apple Store 零售店内的实践讲座，学习基础知识，提高你的 <br>Mac 使用技能。</p>
		<span><a href="#" style="color:#fff;">查找零售店&nbsp;&gt;</span>
	</div>
	
<!--footer-->
<footer>
	<div class="container buy">
		<h4 class="iconfont">&#xe602;&nbsp;&gt;&nbsp;Mac</h4>
		<div class="row">
			<div class="col-lg-2">
				<h3>选购及了解</h3>
				<ul>
					<li><a href="#">Mac</a></li>
					<li><a href="#">iPad</a></li>
					<li><a href="#">iPhone</a></li>
					<li><a href="#">Watch</a></li>
					<li><a href="#">Music</a></li>
					<li><a href="#">iTunes</a></li>
					<li><a href="#">iPod</a></li>
					<li><a href="#">配件</a></li>
					<li><a href="#">APP&nbsp;Store充值卡</a></li>
				</ul>
			</div>
			<div class="col-lg-3" style="padding-left:30px;">
				<h3>Apple Store 商店</h3>
				<ul>
					<li><a href="#">查找零售店</a></li>
					<li><a href="#">Genius Bar 天才吧</a></li>
					<li><a href="#">讲座和学习</a></li>
					<li><a href="#">青少年活动</a></li>
					<li><a href="#">Apple Store App</a></li>
					<li><a href="#">翻新和优惠</a></li>
					<li><a href="#">分期付款</a></li>
					<li><a href="#">重复使用和循环利用</a></li>
					<li><a href="#">订单状态</a></li>
					<li><a href="#">选购帮助</a></li>
				</ul>
			</div>
			<div class="col-lg-2">
				<h3>教育与应用</h3>
				<ul>
					<li><a href="#">Apple 与教育</a></li>
					<li><a href="#">高校师生选购</a></li>
				</ul>
				<h3>商务应用</h3>
				<ul>
					<li><a href="#">Apple 与商务</a></li>
					<li><a href="#">商务选购</a></li>
				</ul>
			</div>
			<div class="col-lg-2">
				<h3>账户</h3>
				<ul>
					<li><a href="#">管理你的Apple ID</a></li>
					<li><a href="#">Apple store账户</a></li>
					<li><a href="#">iCloud.com</a></li>
				</ul>
				<h3>Apple 价值观</h3>
				<ul>
					<li><a href="#">辅助功能</a></li>
					<li><a href="#">环境责任</a></li>
					<li><a href="#">隐私</a></li>
					<li><a href="#">供应商责任</a></li>
				</ul>
			</div>
			<div class="col-lg-2">
				<h3>关于Apple</h3>
				<ul>
					<li><a href="#">Apple资讯</a></li>
					<li><a href="#">工作机会</a></li>
					<li><a href="#">媒体资讯</a></li>
					<li><a href="#">活动</a></li>
					<li><a href="#">联系Apple</a></li>
				</ul>
			</div>	
		</div>
		<p>更多选购方式：前往<a href="#"> Apple Store</a> 零售店，致电 400-666-8800 或查找在你附近的<a href="#">授权经销商</a>。</p>
		<div class="privice" style="margin-bottom:25px;">
			<span style="color:#888;margin-right:30px;">Copyright © 2017 Apple Inc. 保留所有权利。</span>
			<a href="#">隐私政策</a>
			<a href="#">使用条款</a>
			<a href="#">销售政策</a>
			<a href="#">法律信息</a>
			<a href="#">网站地图</a>
			<span style="float:right;"><a href="#" style="border:0;padding:0;margin:0;"><img src="images/16.png"/>&nbsp;中国</a></span>
		</div>
	</div>
</footer>
	<!-- <div type="button" style="position:fixed;right:0;bottom:0;">
		<a href="#top" style="text-decoration: none;">返回顶部</a>
	</div> -->
	<script src="js/text.js" type="text/javascript"></script>
	</body>
</html>
